import React, { Component } from "react";
import { Form, Input, Button } from "antd";
import { $httpPost } from "../../request";
import "./index.scss";
export default class Login extends Component {
  state = {
    loginForm: {
      username: "",
      password: "",
    },
  };
  formRef = React.createRef();

  componentDidMount() {}

  //获取用户输入的账号和密码
  headleonChange = (dataType) => {
    return (event) => {
      this.setState({
        loginForm: Object.assign(this.state.loginForm, {
          [dataType]: event.target.value,
        }),
      });
    };
  };
  // 点击登录
  login = () => {
    $httpPost("admin/login", this.state.loginForm).then((res) => {
      if (res.code === 0) {
        localStorage.setItem("token", res.data.token);
        this.props.history.push("/home");
      }
    });
  };

  headleKeyUp = (enevt) => {
    const { username, password } = this.state.loginForm;
    if (
      enevt.keyCode === 13 &&
      username.trim() !== "" &&
      password.trim() !== ""
    ) {
      this.login();
    }
  };

  // 表单重置
  onReset = () => {
    this.formRef.current.resetFields();
  };

  render() {
    return (
      <div className="login">
        <div className="container">
          <div className="login_container">
            <div className="login_box">
              <div className="avatar_box">
                <img
                  src={require("../../../public/image/xiangji.png").default}
                  alt=""
                />
              </div>
              <Form
                ref={this.formRef}
                name="basic"
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
                initialValues={{
                  remember: true,
                }}
                autoComplete="off"
              >
                <Form.Item
                  label="Username"
                  name="username"
                  rules={[
                    {
                      required: true,
                      message: "Please input your username!",
                    },
                  ]}
                >
                  <Input
                    onKeyUp={this.headleKeyUp}
                    placeholder="请输入用户名"
                    onChange={this.headleonChange("username")}
                  />
                </Form.Item>

                <Form.Item
                  label="Password"
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: "Please input your password!",
                    },
                  ]}
                >
                  <Input.Password
                    placeholder="请输入用户密码"
                    onKeyUp={this.headleKeyUp}
                    onChange={this.headleonChange("password")}
                  />
                </Form.Item>
                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                >
                  <Button type="primary" onClick={this.login}>
                    登录
                  </Button>
                  <Button htmlType="button" onClick={this.onReset}>
                    重置
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
